Styling and Transitions (1/5)
How does scoped styling work in Svelte?

    In Svelte, **scoped styling** allows you to write CSS inside a component without affecting elements outside of it. Styles defined in a `<style>` block are automatically scoped to the component, preventing conflicts with other components.

    Svelte achieves scoped styles by adding unique attributes to the component's HTML elements and corresponding CSS selectors. This ensures that the styles apply only to the elements in that component.

    Example: Scoped Styles in a Component

    If you want a style to apply globally rather than being scoped to the component, you can use the `:global()` modifier.

    Example: Global Style
    Best practices for scoped styling:
    • Styles inside a `<style>` block are scoped to the component by default.
    • Use `:global()` when you need styles to affect elements outside the component.
    • Component-level scoping prevents CSS conflicts and makes components more reusable.
    • You can still use class names, IDs, and nested selectors—the scoping mechanism handles isolation automatically.